<template>
  <view class="container">
    <!-- 顶部蓝色渐变区域 -->
    <view class="header-gradient" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="logo-area">
        <image src="../../static/logo.png" class="logo-image" mode="aspectFit"></image>
      </view>
      <!-- 计算类型切换 -->
      <view class="calc-type-tabs">
        <view class="tab-item" :class="{ active: calculateType === 'afterTax' }" @tap="calculateType = 'afterTax'" style="border-top-right-radius: 100px;font-size: 22px;">
          <text>计算税后工资</text>
        </view>
        <view class="tab-item" :class="{ active: calculateType === 'beforeTax' }" @tap="calculateType = 'beforeTax'" style="border-top-left-radius: 100px;font-size: 22px;">
          <text>计算税前工资</text>
        </view>
      </view>
    </view>
    
    <!-- 输入表单区域 -->
    <view class="input-form">
      <!-- 收入输入框 -->
      <view class="input-group">
        <view class="label-row">
          <text class="icon-money">💰</text>
          <text class="label">月收入金额</text>
          <view class="income-mode-tabs">
            <view class="tab-item" :class="{ active: incomeMode === 'monthlyAverage' }" @tap="incomeMode = 'monthlyAverage'">
              <text>月均金额</text>
            </view>
            <view class="tab-item" :class="{ active: incomeMode === 'custom' }" @tap="incomeMode = 'custom'">
              <text>自定义金额</text>
            </view>
          </view>
        </view>
        <!-- 月均收入 -->
        <view class="input-wrapper" v-if="incomeMode === 'monthlyAverage'">
          <input type="digit" placeholder="请输入平均每月收入" v-model="monthlyIncome" @input="formatNumber($event, 'monthlyIncome')" />
          <view class="unit-box">
            <text class="unit">元</text>
          </view>
        </view>
        <!-- 自定义收入 -->
        <view class="custom-inputs-container" v-if="incomeMode === 'custom'">
          <view v-for="month in selectedMonths" :key="month" class="input-wrapper custom-month-input">
            <view class="month-tag">{{ month }}月</view>
            <input class="custom-input" type="digit" :placeholder="'请输入' + month + '月收入'" v-model="customIncomes[month]" @input="formatNumber($event, 'customIncomes', month)" />
            <view class="unit-box">
              <text class="unit">元</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 月份选择 -->
      <view class="input-group">
        <view class="label-row">
          <view class="icon-calendar">📅</view>
          <text class="label">月份</text>
          <view class="select-all-btn" @tap="selectAllMonths">
            <text>{{ selectAllButtonText }}</text>
          </view>
        </view>
        <view class="month-selector">
          <view class="month-grid">
            <view v-for="month in months" :key="month" 
                  class="month-item" 
                  :class="{ selected: selectedMonths.includes(month) }"
                  @tap="toggleMonth(month)">
              <text>{{ month }}月</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 按钮区域 -->
      <view class="button-group">
        <button class="reset-btn" @tap="resetMonths">重置</button>
        <button class="calc-btn" @tap="calculateSalary">计算工资</button>
      </view>
      
      <!-- 计税依据链接 -->
      <view class="tax-rule-link" @tap="showTaxRuleModal = true">
        <text>查看计税依据 >></text>
      </view>
    </view>
    
    <!-- 结果展示区域 -->
    <view class="result-section">
      <view class="result-table">
        <view class="table-header">
          <text class="col col-month">月</text>
          <text class="col col-before">税前</text>
          <text class="col col-tax-header">个税</text>
          <text class="col col-after">税后</text>
          <text class="col col-rate-header">税率%</text>
        </view>
        
        <view class="table-body">
          <view v-for="(item, month, index) in resultList" :key="month" class="table-row" :class="{'row-alt': index % 2 !== 0}">
            <text class="col col-month">{{ month }}月</text>
            <text class="col col-before">{{ item.beforeTax }}</text>
            <text class="col col-tax">{{ item.tax }}</text>
            <text class="col col-after">{{ item.afterTax }}</text>
            <text class="col col-rate">{{ item.taxRate }}%</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 计税依据弹窗 -->
    <view class="modal-overlay" v-if="showTaxRuleModal" @tap="showTaxRuleModal = false">
      <view class="modal-content" @tap.stop>
        
        <view class="formula-table">
          <view class="formula-row">
            <view class="formula-label-cell"><text>本期应预扣预缴税额</text></view>
            <view class="formula-value-cell"><text>(累计收入-累计费用-累计免征收入-累计减除费用-累计专项扣除-累计专项附加扣除-累计依法确定的其他扣除) × 预扣率-速算扣除数-累计已预扣预缴税额</text></view>
          </view>
          <view class="formula-row">
            <view class="formula-label-cell"><text>累计费用</text></view>
            <view class="formula-value-cell"><text>累计收入×20%</text></view>
          </view>
          <view class="formula-row">
            <view class="formula-label-cell"><text>累计减除费用</text></view>
            <view class="formula-value-cell"><text>5000元/月×纳税人当年截至本月在本单位连续取得优惠劳务报酬的月份数计算</text></view>
          </view>
        </view>
        
        <view class="modal-title">个人所得税预扣率表</view>
        <view class="modal-subtitle">(居民个人工资、薪资所得预扣预缴适用)</view>
        
        <view class="tax-rate-table">
          <view class="rate-table-header">
            <text class="rate-col-level">级数</text>
            <text class="rate-col-range">累计预扣预缴应纳税所得额</text>
            <text class="rate-col-rate">预扣率(%)</text>
            <text class="rate-col-deduction">速算扣除数</text>
          </view>
          <view class="rate-table-body">
            <view class="rate-table-row" v-for="(item) in taxRateTableFromRule" :key="item.level">
              <text class="rate-col-level">{{ item.level }}</text>
              <text class="rate-col-range">{{ item.range }}</text>
              <text class="rate-col-rate">{{ item.rate }}</text>
              <text class="rate-col-deduction">{{ item.deduction }}</text>
            </view>
          </view>
        </view>

        <!-- 依据 -->
        <view class="basis-section">
          <text class="basis-title">依据:</text>
          <view class="basis-link" v-for="(link, index) in taxBasisLinks" :key="index" @tap="openLink(link.url)">
            <text class="basis-text">{{ link.text }}</text>
          </view>
        </view>

      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      calculateType: 'afterTax',
      incomeMode: 'monthlyAverage',
      monthlyIncome: '',
      customIncomes: {},
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      selectedMonths: [],
      resultList: {},
      showResult: true, // 默认显示结果区域
      showTaxRuleModal: false,
      taxRateTable: [
        { threshold: 36000, rate: 3, quickDeduction: 0 },
        { threshold: 144000, rate: 10, quickDeduction: 2520 },
        { threshold: 300000, rate: 20, quickDeduction: 16920 },
        { threshold: 420000, rate: 25, quickDeduction: 31920 },
        { threshold: 660000, rate: 30, quickDeduction: 52920 },
        { threshold: 960000, rate: 35, quickDeduction: 85920 },
        { threshold: Infinity, rate: 45, quickDeduction: 181920 }
      ],
      taxRateTableFromRule: [
        { level: 1, range: '不超过36000元', rate: 3, deduction: 0 },
        { level: 2, range: '超过36000元至144000元的部分', rate: 10, deduction: 2520 },
        { level: 3, range: '超过144000元至300000元的部分', rate: 20, deduction: 16920 },
        { level: 4, range: '超过300000元至420000元的部分', rate: 25, deduction: 31920 },
        { level: 5, range: '超过420000元至660000元的部分', rate: 30, deduction: 52920 },
        { level: 6, range: '超过660000元至960000元的部分', rate: 35, deduction: 85920 },
        { level: 7, range: '超过960000元的部分', rate: 45, deduction: 181920 }
      ],
      taxBasisLinks: [
        {
          text: '总局公告2018年第61号:《关于发布《个人所得税扣缴申报管理办法(试行)》的公告》',
          url: 'https://www.baidu.com/'
        },
        {
          text: '总局公告2025年第15号:《国家税务总局关于互联网平台企业报送涉税信息有关事项的公告》',
          url: 'https://www.baidu.com/'
        },
        {
          text: '总局公告2025年第16号:《国家税务总局关于互联网平台企业为平台内从业人员办理扣缴申报、代办申报若干事项的公告》',
          url: 'https://www.baidu.com/'
        }
      ]
    };
  },
  computed: {
    isAllSelected() {
      return this.selectedMonths.length === this.months.length;
    },
    selectAllButtonText() {
      return this.isAllSelected ? '清空' : '全选';
    }
  },
  created() {
    this.initializeResultList();
    // #ifdef MP
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    // #endif
    // #ifdef H5
    this.statusBarHeight = 20; // 为H5设置一个顶部内边距
    // #endif
  },
  methods: {
    initializeResultList() {
      const initialResults = {};
      this.months.forEach(month => {
        initialResults[month] = {
          beforeTax: '0.00',
          tax: '0.00',
          afterTax: '0.00',
          taxRate: '0.00'
        };
      });
      this.resultList = initialResults;
    },
    // 切换月份选择
    toggleMonth(month) {
      if (this.selectedMonths.includes(month)) {
        this.selectedMonths = this.selectedMonths.filter(m => m !== month);
        if (this.incomeMode === 'custom') {
          delete this.customIncomes[month];
        }
      } else {
        this.selectedMonths.push(month);
        this.selectedMonths.sort((a, b) => a - b);
        if (this.incomeMode === 'custom' && !this.customIncomes[month]) {
          this.customIncomes[month] = '';
        }
      }
    },
    
    // 全选月份
    selectAllMonths() {
      if (this.selectedMonths.length === this.months.length) {
        // 如果已经全选，则取消全选
        this.selectedMonths = [];
        if (this.incomeMode === 'custom') {
          this.customIncomes = {};
        }
      } else {
        // 否则全选
        this.selectedMonths = [...this.months];
        if (this.incomeMode === 'custom') {
          for (const month of this.months) {
            if (!this.customIncomes[month]) {
              this.customIncomes[month] = '';
            }
          }
        }
      }
    },
    
    // 重置所有输入
    resetMonths() {
      this.selectedMonths = [];
      this.monthlyIncome = '';
      this.customIncomes = {};
      this.initializeResultList();
    },
    
    // 格式化数字输入
    formatNumber(e, type, month = null) {
      let value = e.detail.value.replace(/[^\d.]/g, '');
      // 限制只能输入一个小数点
      const pointIndex = value.indexOf('.');
      if (pointIndex !== -1) {
        value = value.substring(0, pointIndex + 3); // 保留两位小数
      }
      
      if (type === 'monthlyIncome') {
        this.monthlyIncome = value;
      } else if (type === 'customIncomes' && month !== null) {
        this.customIncomes[month] = value;
      }
    },
    
    // 格式化金额为千分位
    formatMoney(num) {
      if (!num && num!== 0) return '';
      num = parseFloat(num);
      return num.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    },
    
    // 计算工资
    calculateSalary() {
      // 输入验证
      if (this.selectedMonths.length === 0) {
        uni.showToast({
          title: '请选择月份',
          icon: 'none'
        });
        return;
      }
      
      if (this.incomeMode === 'monthlyAverage') {
        if (!this.monthlyIncome) {
          uni.showToast({
            title: '请输入月均收入',
            icon: 'none'
          });
          return;
        }
      } else {
        for (const month of this.selectedMonths) {
          if (!this.customIncomes[month]) {
            uni.showToast({
              title: `请输入${month}月收入`,
              icon: 'none'
            });
            return;
          }
        }
      }
      
      // 计算工资逻辑
      if (this.calculateType === 'afterTax') {
        this.calculateAfterTax();
      } else {
        this.calculateBeforeTax();
      }
    },
    
    // 计算税后工资
    calculateAfterTax() {
      this.initializeResultList();
      let accumulatedIncome = 0;
      let accumulatedDeduction = 0;
      let accumulatedTax = 0;
      
      for (const month of this.selectedMonths) {
        const income = this.incomeMode === 'monthlyAverage' 
          ? parseFloat(this.monthlyIncome) 
          : parseFloat(this.customIncomes[month]);
        
        accumulatedIncome += income;
        accumulatedDeduction += 5000; // 每月减除费用5000
        
        // 计算当月应纳税所得额
        const taxableIncome = accumulatedIncome - accumulatedDeduction;
        let tax = 0;
        let rateInfo = this.taxRateTable[0];
        
        if (taxableIncome > 0) {
          // 查找适用税率和速算扣除数
          for (const info of this.taxRateTable) {
            if (taxableIncome <= info.threshold) {
              rateInfo = info;
              break;
            }
          }
          
          // 计算当月累计应缴个税
          const currentAccumulatedTax = taxableIncome * rateInfo.rate / 100 - rateInfo.quickDeduction;
          // 当月应缴个税 = 当月累计应缴 - 之前累计已缴
          tax = Math.max(currentAccumulatedTax - accumulatedTax, 0);
          accumulatedTax = currentAccumulatedTax;
        }
        
        const afterTax = income - tax;
        
        this.resultList[month] = {
          beforeTax: income.toFixed(2),
          tax: tax.toFixed(2),
          afterTax: afterTax.toFixed(2),
          taxRate: rateInfo.rate.toFixed(2)
        };
      }
    },
    
    // 计算税前工资（根据税后反推）
    calculateBeforeTax() {
      this.initializeResultList();
      let accumulatedIncomeBefore = 0;
      let accumulatedTaxCalculated = 0;

      for (const month of this.selectedMonths) {
        const afterTaxIncome = this.incomeMode === 'monthlyAverage' 
          ? parseFloat(this.monthlyIncome) 
          : parseFloat(this.customIncomes[month]);
        
        let low = afterTaxIncome;
        let high = afterTaxIncome + 100000;
        let beforeTax = 0;
        
        for (let i = 0; i < 30; i++) {
          beforeTax = (low + high) / 2;
          
          const monthsSoFar = this.selectedMonths.filter(m => m <= month).length;
          const currentAccumulatedIncome = accumulatedIncomeBefore + beforeTax;
          const currentAccumulatedDeduction = 5000 * monthsSoFar;
          const taxableIncome = currentAccumulatedIncome - currentAccumulatedDeduction;
          
          let currentTotalTax = 0;
          if (taxableIncome > 0) {
            let rateInfo = this.taxRateTable[0];
            for (const info of this.taxRateTable) {
              if (taxableIncome <= info.threshold) {
                rateInfo = info;
                break;
              }
            }
            currentTotalTax = taxableIncome * rateInfo.rate / 100 - rateInfo.quickDeduction;
          }
          
          const currentMonthTax = Math.max(0, currentTotalTax - accumulatedTaxCalculated);
          
          if (beforeTax - currentMonthTax > afterTaxIncome) {
            high = beforeTax;
          } else {
            low = beforeTax;
          }
        }
        beforeTax = (low + high) / 2;

        const tax = beforeTax - afterTaxIncome;
        const finalTaxableIncome = accumulatedIncomeBefore + beforeTax - 5000 * this.selectedMonths.filter(m => m <= month).length;
        let finalTotalTax = 0;
        let rateInfoForDisplay = this.taxRateTable[0];

        if (finalTaxableIncome > 0) {
          for (const info of this.taxRateTable) {
            if (finalTaxableIncome <= info.threshold) {
              rateInfoForDisplay = info;
              break;
            }
          }
          finalTotalTax = finalTaxableIncome * rateInfoForDisplay.rate / 100 - rateInfoForDisplay.quickDeduction;
        }
        
        this.resultList[month] = {
          beforeTax: beforeTax.toFixed(2),
          tax: tax.toFixed(2),
          afterTax: afterTaxIncome.toFixed(2),
          taxRate: rateInfoForDisplay.rate.toFixed(2)
        };
        
        accumulatedIncomeBefore += beforeTax;
        accumulatedTaxCalculated = Math.max(0, finalTotalTax);
      }
    },
    
    // 查看计税依据
    // viewTaxRule() {
    //   uni.navigateTo({
    //     url: '/pages/tax-rule/tax-rule'
    //   });
    // }
    openLink(url) {
      // #ifdef APP-PLUS
      plus.runtime.openURL(url);
      // #endif
      // #ifdef H5
      window.open(url, '_blank');
      // #endif
      // #ifdef MP
      uni.setClipboardData({
        data: url,
        success: () => {
          uni.showToast({
            title: '链接已复制,请在浏览器打开',
            icon: 'none'
          });
        }
      });
      // #endif
    }
  }
};
</script>

<style>
.container {
  background-color: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 30rpx;
}

/* 顶部渐变区域 */
.header-gradient {
  background: linear-gradient(to bottom, #ffffff, #85c1ff);
  height: 320rpx;
  position: relative;
  box-sizing: border-box;
}

.logo-area {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120rpx;
}

.logo-image {
  width: 700px;
  height: 150px;
}

/* 计算类型切换 */
.calc-type-tabs {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.calc-type-tabs .tab-item {
  width: 50%;
  padding: 20rpx;
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.calc-type-tabs .tab-item.active {
  background: #fff;
  color: #000;
}

/* 输入表单区域 */
.input-form {
  margin: 0;
  padding: 30rpx;
  background-color: #FFFFFF;
  position: relative;
  z-index: 5;
}

/* 收入类型选择 */
.income-mode-tabs {
  display: flex;
  margin-left: auto;
}

.income-mode-tabs .tab-item {
  padding: 0 10rpx;
  margin: 0 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.income-mode-tabs .tab-item text {
  font-size: 28rpx;
  color: #666666;
  padding-bottom: 5rpx;
}

.income-mode-tabs .tab-item.active text {
  color: #9163f1;
  font-weight: bold;
  border-bottom: 2px solid #9163f1;
}

/* 输入组 */
.input-group {
  margin-bottom: 30rpx;
}

.label-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.icon-money,
.icon-calendar {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
  font-size: 28rpx;
}

.icon-money {
  font-size: 32rpx;
}

.label {
  font-size: 28rpx;
  color: #333333;
}

.select-all-btn {
  background-color: transparent;
  border: 1rpx solid #EEEEEE;
  border-radius: 30rpx;
  padding: 6rpx 20rpx;
  margin-left: auto;
}

.select-all-btn text {
  font-size: 24rpx;
  color: #9163f1;
}

.input-wrapper {
  display: flex;
  align-items: center;
  border: 1rpx solid #EEEEEE;
  border-radius: 8rpx;
  height: 80rpx;
  background-color: #FFFFFF;
  overflow: hidden;
}

.input-wrapper input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  padding: 0 20rpx;
}

/* 自定义金额输入框特定样式 */
.custom-inputs-container .input-wrapper {
  margin-bottom: 20rpx;
}

.custom-month-input .month-tag {
  background-color: #9163f1;
  color: white;
  height: 100%;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.custom-month-input .custom-input {
  padding: 0 20rpx;
  flex: 1;
  height: 100%;
  font-size: 28rpx;
}

.unit-box {
  background-color: #9163f1;
  height: 100%;
  width: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unit {
  color: #FFFFFF;
  font-size: 28rpx;
}

/* 月份选择器 */
.month-selector {
  background-color: #FFFFFF;
}

.month-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.month-item {
  width: calc(16.666% - 10rpx);
  margin-bottom: 10rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.month-item text {
  width: 100%;
  height: 100%;
  line-height: 70rpx;
  text-align: center;
  border-radius: 6rpx;
  border: 1rpx solid #EEEEEE;
  font-size: 26rpx;
  color: #333333;
}

.month-item.selected text {
  background-color: #9163f1;
  color: #FFFFFF;
  border-color: #9163f1;
}

/* 按钮区域 */
.button-group {
  display: flex;
  margin-top: 40rpx;
}

.reset-btn,
.calc-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
  text-align: center;
  border: none;
}

.reset-btn {
  background-color: rgb(216, 216, 216);
  color: #666666;
  margin-right: 20rpx;
}

.calc-btn {
  background-color: rgb(0, 102, 255);
  color: #FFFFFF;
}

/* 计税依据链接 */
.tax-rule-link {
  text-align: center;
  margin-top: 20rpx;
}

.tax-rule-link text {
  color: #9163f1;
  font-size: 24rpx;
}

/* 结果表格 */
.result-section {
  margin: 0;
  padding: 30rpx 0;
  background-color: #f7f8fa;
}

.result-table {
  border: 1rpx solid #EEEEEE;
  overflow: hidden;
  background-color: #FFFFFF;
}

.table-header {
  display: flex;
  background-color: rgb(245, 247, 250);
  height: 80rpx;
  align-items: center;
  white-space: nowrap;
}

.table-body .table-row {
  display: flex;
  height: 80rpx;
  align-items: center;
  border-bottom: 1rpx solid #EEEEEE;
  white-space: nowrap;
}

.table-body .table-row.row-alt {
  background-color: rgb(250, 250, 250);
}

.table-body .table-row:last-child {
  border-bottom: none;
}

.col {
  text-align: center;
  font-size: 26rpx;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-month {
  width: 20%;
}

.col-before,
.col-after {
  width: 25%;
}

.col-tax,
.col-tax-header {
  width: 15%;
}

.col-rate,
.col-rate-header {
  width: 15%;
}

.table-body .col-tax {
  color: #e74c3c;
}

.table-body .col-rate {
  color: #27ae60;
}

/* 计税依据弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 90%;
  background-color: white;
  border-radius: 16rpx;
  padding: 30rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.formula-table {
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  margin-bottom: 30rpx;
  display: table;
  width: 100%;
}

.formula-row {
  display: table-row;
}

.formula-label-cell, .formula-value-cell {
  display: table-cell;
  padding: 20rpx;
  font-size: 24rpx;
  border-bottom: 1rpx solid #e0e0e0;
  vertical-align: middle;
}

.formula-row:last-child .formula-label-cell,
.formula-row:last-child .formula-value-cell {
  border-bottom: none;
}

.formula-label-cell {
  font-weight: bold;
  border-right: 1rpx solid #e0e0e0;
  width: 180rpx;
  text-align: center;
  white-space: normal;
}

.formula-value-cell {
    white-space: normal;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10rpx;
}

.modal-subtitle {
  font-size: 24rpx;
  color: #666;
  text-align: center;
  margin-bottom: 20rpx;
}

.tax-rate-table {
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  overflow: hidden;
}

.rate-table-header {
  display: flex;
  background-color: #f8f8f8;
  font-weight: bold;
  align-items: stretch;
}

.rate-table-body {
    display: block;
}

.rate-table-row {
  display: flex;
  border-bottom: 1rpx solid #EEEEEE;
  align-items: stretch;
}
.rate-table-row:last-child {
  border-bottom: none;
}

.rate-table-header text, .rate-table-row text {
  padding: 20rpx 10rpx;
  font-size: 24rpx;
  text-align: center;
  white-space: normal;
  border-right: 1rpx solid #EEEEEE;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rate-table-header text:last-child,
.rate-table-row text:last-child {
  border-right: none;
}

.rate-col-level { width: 15%; }
.rate-col-range { width: 40%; text-align: left; justify-content: flex-start; }
.rate-col-rate { width: 25%; }
.rate-col-deduction { width: 20%; }

/* 依据模块样式 */
.basis-section {
  margin-top: 30rpx;
  border-radius: 8rpx;
  padding: 20rpx;
}

.basis-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #666;
}

.basis-link {
  margin-bottom: 15rpx;
}

.basis-link:last-child {
  margin-bottom: 0;
}

.basis-text {
  font-size: 26rpx;
  color: #DAB866;
  word-break: break-all;
}
</style>    